<template>
	<view class="box">
		<tito class="tito" title="提现明细" lefticon="left" @clickLeft="clickLeft" />
		<view class="image-pickerDate">
			<view class="image">
				<image src="../static/zhuangshi.png" mode=""></image>
			</view>
			<view class="pickerDate">
				<picker mode="date" fields="month" :value="date" :start="startDate" :end="endDate"
					@change="bindDateChange">
					<view class="uni-input">{{date}}</view>
				</picker>
				<uni-icons type="down" size="20" color="#2590FA"></uni-icons>
			</view>
		</view>
		<view class="whole">
			<uni-segmented-control :current="Number(current)" :values="items" @clickItem="onClickItem" styleType="text"
				activeColor="#2590FA"></uni-segmented-control>
		</view>
		<view class="contenList" v-if="rechargeLogDate.length > 0">
			<view class="conten" v-for="(item,index) in rechargeLogDate" :key="index">
				<view class="text-number">
					<view class="text">
						提现金额
					</view>
					<view class="number">
						￥{{item.money}}
					</view>
					<view class="recharge">
						{{withdeawalData[item.status + 1]}}
					</view>
				</view>
				<view class="text-number">
					<view class="text">
						提现到账
					</view>
					<view class="number">
						{{item.bank + "(尾号" + item.bankAccount.slice(-4) + ")"}}
					</view>
				</view>
				<view class="text-number">
					<view class="text">
						申请时间
					</view>
					<view class="number">
						{{item.auditTime}}
					</view>
				</view>
				<view class="text-number">
					<view class="text">
						到账时间
					</view>
					<view class="number">
						{{item.remitTime}}
					</view>
				</view>
			</view>
		</view>
		<view class="none" v-else>
			暂无更多
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate,
				items: ['全部', '提现成功', '提现失败'],
				current: "0",
				status: "", // 状态: -1-提现失败, 2-提现成功, 不传为全部
				rechargeLogDate: [],
				withdeawalData: [
					"审核拒绝",
					"申请中",
					"审核通过",
					"已打款",
				],
				page: 1,
				limit: 10,
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			this.rechargeLogList()
		},
		onReachBottom() {
			this.page++
			this.rechargeLogList()
		},
		methods: {
			onClickItem(e) {
				this.page = 1
				this.rechargeLogDate = []
				if (e.currentIndex == 0) {
					this.status = "";
				} else if (e.currentIndex == 1) {
					this.status = "2";
				} else if (e.currentIndex == 2) {
					this.status = "1";
				}
				this.rechargeLogList();

			},
			//提现列表
			async rechargeLogList() {
				let data = {
					yearMonth: this.date, //年月: 如2024-01
					page: this.page, //页
					limit: this.limit, //条
					status: this.status

				}
				let res = await this.$request.get("/water-platform-app-api/customer/withdrawlRecord/list", data)
				if (res.data.length > 0) {
					console.log(res, '----提现列表----');
					this.rechargeLogDate.push(...res.data)
				} else {
					uni.showToast({
						title: "没有更多了！",
						icon: "none"
					})
				}
			},
			clickLeft() {
				uni.navigateBack()
			},
			bindDateChange(e) {
				this.date = e.detail.value
				this.page = 1
				this.rechargeLogDate = []
				this.rechargeLogList();
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 6;
				}
				month = month > 9 ? month : '0' + month;
				return `${year}-${month}`;
			},
		}
	}
</script>

<style lang="scss">
	.none {
		text-align: center;
		margin-top: 500rpx;
		font-size: 32rpx;
		color: #B1B2B2;
	}

	.box {
		min-height: 100vh;
		background-color: #F3F5F6;
	}

	.image-pickerDate {
		margin-top: 32rpx;
		position: relative;

		.image {
			text-align: center;

			image {
				width: 592rpx;
				height: 16rpx;
			}
		}

		.pickerDate {
			margin: -48rpx auto;
			width: 228rpx;
			height: 56rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 2rpx solid #2590FA;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 8rpx 24rpx;
			box-sizing: border-box;

			.uni-input {
				font-size: 28rpx;
				color: #2590FA;
			}
		}
	}

	.whole {
		margin-top: 68rpx;
	}

	.contenList {
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-top: 48rpx;

		.conten {
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 20rpx 0rpx #F0F1F2;
			border-radius: 16rpx;
			padding: 24rpx;
			box-sizing: border-box;
			margin-top: 24rpx;

			.text-number:first-child {
				margin-top: 0rpx;
			}

			.text-number {
				font-size: 28rpx;
				display: flex;
				align-items: center;
				margin-top: 24rpx;

				.text {
					color: #616366;
				}

				.number {
					color: #14171A;
					margin-left: 24rpx;
				}

				.recharge {
					font-size: 24rpx;
					color: #2590FA;
					margin-left: auto;
				}
			}
		}
	}
</style>